<template>
  <div class="box">
    <header class="header">商品详情页</header>
    <div class="proCont">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(item,idx) in proImg" :key="idx" @click="proview(idx)">
          <van-image width="100%" height="4rem" fit="cover" :src="item" />
        </van-swipe-item>
      </van-swipe>
      <!-- <p>接收到的id为：{{$route.params.id}}</p> -->
      <div class="proInfo">
        <h3>商品名称：{{proName}}</h3>
        <p>品牌：{{brand}}</p>
        <p>商品描述：{{introduce}}</p>
        <p>分类：{{column}}</p>
        <p>价格：{{price}}</p>
        <p>销量：{{sales}}</p>
        <p>库存：{{stock}}</p>
        <p>折扣：{{discount}}</p>
        <p>评分：{{score}}</p>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
// pro?id=1f31jg31l3
// 发送↓
// /pro/1f31jg31l3
// 定义↓
// /pro/:id

import Vue from 'vue'
import { Swipe, SwipeItem, Image as VanImage, ImagePreview, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'

import { getDetail, addCart } from '../../api/index.js'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)

export default {
  data () {
    return {
      brand: '',
      column: '',
      discount: 10,
      introduce: '',
      logo: '',
      price: 0,
      proImg: '',
      proName: '',
      sales: 0,
      score: 5,
      stock: 0
    }
  },
  mounted () {
    // console.log(this.$route.params.id)
    // 根据路由跳转时携带的商品id,请求数据库中的商品详情数据
    getDetail({
      id: this.$route.params.id
    }).then(res => {
      // 解析数据
      this.proImg = [res.data.data.proImg, 'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']
      this.proName = res.data.data.proName
      this.brand = res.data.data.brand
      this.discount = res.data.data.discount
      this.column = res.data.data.column
      this.introduce = res.data.data.introduce
      this.price = res.data.data.price
      this.sales = res.data.data.sales
      this.stock = res.data.data.stock
      this.score = res.data.data.score
    })
  },
  methods: {
    proview (id) {
      ImagePreview({
        images: this.proImg,
        startPosition: id
      })
    },
    addCart () {
      if (localStorage.getItem('isLogin') === 'ok') {
        addCart({
          userId: localStorage.getItem('userId'),
          proId: this.$route.params.id
        }).then(res => {
          console.log(res.data)
        })
      } else {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="scss">
.box{
  display: flex;
  .proCont{
    flex:1;
    overflow: auto;
    .proInfo{
      padding: 0 0.1rem 0.5rem;
    }
  }
}
</style>
